<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-inline .layui-input {
            height: 30px;
        }
        .layui-form-item .layui-btn+.layui-btn {
            margin-left: 60px;
        }
    </style>
    
</head>

<body style="margin:20px 20px;">
    <div class="search">
        <div class="layui-inline">
            <input class="layui-input"  id="test_question_name" placeholder="试题名称" autocomplete="off">
        </div>
        <div class="layui-inline">
            <input class="layui-input"  id="course_id" placeholder="课程号" autocomplete="off">
        </div>
        <button class="layui-btn layui-btn-normal  layui-btn-sm" id="search_btn" data-type="reload">搜索</button>
    </div>
    
  
    <!-- 表格行操作工具按钮 -->
    <div style="display:none" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="exam">在线考试</a>
        
  </div>
    <div>
        <table class="layui-hide" id="test_question_set" lay-filter="test_question_set"></table>
    </div>
    <div class="layui-tab-item">
        <div id="pageDemo"></div>
    </div>

   
    
    

    <script>
        layui.use(['table', 'laypage', 'layer', 'form','upload'], function ()
        {
            var table = layui.table,
                laypage = layui.laypage,
                form = layui.form,
                upload = layui.upload;

                
            var ins1 = table.render({ //相当于ajax
                elem: '#test_question_set'
                , url: 'onlineExam.aspx'
                , id: 'test_question_set1' //重载时使用
                , title: '在线考试信息表'
                , height: 520
                , page: true
                , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
                , limit: 10  //一页显示10条数据
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
               , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'print', { 
                    title: '导出'
                  , layEvent: 'export'
                  , icon: 'layui-icon-export'
                }]
                , cols: [[
                    { field: 'test_question_id', width: 200, title: '试题号', sort: true ,hide:true },
                    { field: 'course_id', width: 200, title: '课程号', sort: true }
                    , { field: 'test_question_name', width: 200, title: '试题名称' }
                      , { field: 'radio_questions_sum', width: 180, title: '单选题个数' }
                       , { field: 'mutil_questions_sum', width: 140, title: '多选题个数' }
                       , { field: 'judge_questions_sum', width: 140, title: '判断题个数' }
                       , { field: 'answer_questions_sum', width: 240, title: '解答题个数' }
                    , { fixed: 'right', width: 165, align: 'center',title:'操作', toolbar: '#barDemo' }//添加列工具条
                ]]
                , parseData: function (res)
                { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    console.log(JSON.stringify(res));
                    console.log(JSON.stringify(res.code));
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , error: function (xhr, state, errorThrown)
                {
                    requesFail(xhr);
                }
            })
            //监听行工具事件
            table.on('tool(test_question_set)', function (obj)
            { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值

                if (layEvent === 'exam')
                {
                    //去考试
                    //判断是否已经考过
                    $.ajax({
                        url: 'isTakeExam.aspx',
                        dataType: 'text',
                        data: { 'test_question_id': data.test_question_id },
                        method: 'post',
                        success: function (res)
                        {
                            if (res >= 0)
                            {
                                layer.alert('您已经参加过考试，不能再次参加', { icon: 1, offset: '200px' });
                            }
                            else
                            {
                                layer.confirm('准备开始考试！！！', {
                                    btn: ['确定', '取消'] //可以无限个按钮
                                    , offset: '200px'
                                  , btn2: function (index, layero)
                                  {
                                      //按钮【按钮二】的回调
                                      return true;
                                  }
                                }, function (index)
                                {
                                    //按钮【按钮一】的回调
                                    layer.close(index);
                                    window.open("./exam.html?test_question_id=" + data.test_question_id, "blank");
                                    
                                }

                                );
                                
                            }

                        }
                    });
                    
                } 
               
            });
            
            //头工具栏事件
            table.on('toolbar(test_question_set)', function (obj)
            {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event)
                {
                    

                        //自定义头工具栏右侧图标 - 导出
                    case 'export':
                        layer.confirm('是否导出数据！', {
                            btn: ['确定', '取消'] //可以无限个按钮
                            , btn2: function (index, layero)
                            {

                                return true;//按钮【按钮二】的回调
                            }
                        }, function (index)
                        {

                            layer.close(index);//按钮【按钮一】的回调
                            exportFile();
                        });

                        break;
                };
                
            });
            function exportFile()
            {
                var student_id = $('#course_id').val();
                var student_name = $('#test_question_name').val();
                var para = {};
                para.student_id = student_id;
                para.student_name = student_name;
                $.ajax({
                    url: '../export/onlineExamExport.aspx',
                    methods: 'post',
                    dataType: 'json',
                    data: para,
                    success: function (res)
                    {
                        table.exportFile(ins1.config.id, res.data);
                    },
                    error: function (res)
                    {
                        alert("导出失败");
                    }
                });

            }
            $('#search_btn').click(function ()
            {
                var student_id = $('#course_id').val();
                var student_name = $('#test_question_name').val();
                var para = {};
                para.student_id = student_id;
                para.student_name = student_name;
                table.reload('test_question_set1', {
                    url: 'onlineExam.aspx'
                    , methods: "post"
                    ,where:para
                    , page: {
                        curr: 1
                    }
                });
            });
            
           

           

        });

        
       
    </script>
    
</body>

</html>